<template>
	<nt-container>

		<view class="form-container">
			<view class="form-item vertical">
				<view class="form-item__label">费用类型：</view>
				<view class="form-item__content" @tap="show = true">
					<u--input v-model="title" disabled placeholder="选择费用类型"></u--input>
					<text class="iconfont">&#xe6bb;</text>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">费用：</view>
				<view class="form-item__content">
					<u--input v-model="formData.money" placeholder="请输入费用"></u--input>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">备注：</view>
				<view class="form-item__content">
					<u--textarea v-model="formData.remarks" placeholder="请填写备注" height="150" autoHeight maxlength="-1"
						:confirmType="null" :autoHeight="true"></u--textarea>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">上传图片：</view>
				<view class="form-item__content">
					<nt-upload @success="successUpload" :images="previewImage" :maxCount="9"></nt-upload>
				</view>
			</view>
			<nt-button text="提交" @tap="submit"></nt-button>
			<u-picker :show="show" :columns="[typesList]" keyName="label" @cancel="show = false" @confirm="confirm"
				@close="show = false" closeOnClickOverlay></u-picker>
		</view>
	</nt-container>
</template>

<script>
	import {
		getUserFareLogDetails,
		editUserFareLog,
		addUserFareLog
	} from "@/api"
	export default {
		data() {
			return {
				show: false,
				formData: {
					remarks: "",
					money: "",
					type_name: ''
				},
				images: [],
				previewImage: [],
				typesList: [{
						label: '羊城通',
						value: '羊城通'
					},
					{
						label: '租电池',
						value: '租电池'
					},
					{
						label: '其他',
						value: '其他'
					},
				],
				id: "",
				info: {},
				title: ''
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getDetail()
			}
		},
		methods: {
			submit() {
				if (!this.formData.type_name) return this.toast('请选择费用类型')
				if (!this.formData.money) return this.toast('请输入费用')
				if (!this.formData.remarks) return this.toast('请输入备注')
				if (this.images.length === 0) return this.toast('请上传图片')
				this.id ? this.update() : this.add()
			},
			add() {
				addUserFareLog({
					images: this.images.map(item => item.url),
					...this.formData
				}).then(res => {
					if (res.code === 1) {
						this.toast('添加成功')
						setTimeout(() => {
							this.back()
							uni.$emit('getOtherList')
						}, 1000)
					}
				})
			},
			update() {
				console.log({
					id: this.id,
					images: this.images.map(item => item.url),
					...this.formData
				})
				editUserFareLog({
					id: this.id,
					images: this.images.map(item => item.url),
					...this.formData
				}).then(res => {
					if (res.code === 1) {
						this.toast('修改成功')
						setTimeout(() => {
							this.back()
							uni.$emit('getOtherList')
						}, 1000)
					}
				})
			},
			getDetail() {
				getUserFareLogDetails(this.id).then(res => {
					const {
						code,
						data
					} = res
					this.formData.remarks = data.remarks
					this.formData.money = data.money
					this.formData.type_name = data.type_name
					this.title = data.type_name
					this.previewImage = data.images
				})
			},
			confirm(e) {
				console.log(e)
				this.formData.type_name = e.value[0].value
				this.title = e.value[0].value
				this.show = false
			},
			// 上传成功
			successUpload(e) {
				this.images = e
			},
		}
	}
</script>
<style scoped lang="scss">
	.form {
		&-container {
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
		}

		&-item {
			display: flex;
			margin-top: 20rpx;

			&.vertical {
				flex-direction: column;
			}

			&.horizontal {
				flex-direction: row;
				align-items: center;
			}

			&__label {
				font-size: 26rpx;
				color: #333;
				height: 80rpx;
				line-height: 80rpx;
				width: 140rpx;
				font-weight: bold;
			}

			&__content {
				flex: 1;
				position: relative;

				.iconfont {
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}

				/deep/ .u-textarea {
					min-height: 225rpx;
					border-radius: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;

					.uni-textarea-textarea {
						height: 100%
					}

					.uni-textarea-wrapper {
						min-height: 100%;
					}

					&.u-border {
						border-width: 1rpx;
						border-style: solid;
						border-color: #F8D4B9 !important;
					}
				}

				/deep/ .u-input {
					box-sizing: border-box;

				}
			}
		}
	}

	/deep/ .button-container {
		margin-top: 30rpx;
	}

	.form-item__content {
		/deep/.u-input {
			background: rgb(245, 247, 250)
		}
	}
</style>